<template>
	<view class="wrap">
		<u-popup :show="dispatchShow" mode="center">
			<view class="dispatchBox stowageBox">
				<view class="close" @click="dispatchClose()">
					<u-icon name="close" labelSize="14"></u-icon>
				</view>
				<view class="dispatchHead">
					选择运单模式
				</view>
				<view class="tabUl">
					<view style="padding: 52rpx;">

						<u-radio-group placement="column" size="24" labelSize="33" iconPlacement="right"
							@change="groupChange1">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1"
								:key="index" :label="item.name" :name="item.name" @change="radioChange1">
							</u-radio>
						</u-radio-group>
						
						
					</view>
					
				</view>
				<view class="selDispatch" :class="waybillName==''?'noSel':''"
					@click="waybillName==0?'':selStowageStatu()">
					确定
				</view>
			</view>
		</u-popup>
		<view class="fixed">
			<view class="header-wrap">
				<view class="nav-wrap">
					<view class="left" style="float: left;font-size: 40rpx; width:30rpx; height:40rpx" @click="back()">
						<image src="../../static/back.png" mode=""></image>
					</view>
					<view class="types">
						运单详情
					</view>
					
					<view class="patternState" @click="jumpDetails()"  v-if="billStatus<5">
						<view class="pattern" v-if="waybillMode == 1">
							配载
						</view> 
						<view class="pattern " v-if="waybillMode == 2">
							配载
						</view>
						<view class="pattern " v-if="waybillMode == 3">
							配载
						</view>
						<view v-if="waybillMode == 0 && billStatus != 2 ">
							配载
						</view>
					</view>
					<view v-else>
						
					</view>
				</view>

			</view>

			<view class="tabBox">
				<tabbar :tabItem="tabItem" :tabIndex="tabIndex" @tabClick="tabClick" textColor="#999"></tabbar>
			</view>
		</view>
		<waybill-tab :wayBillId ="wayBillId"  :loading1="true"  v-if="tabIndex == 0"></waybill-tab>
		<waybill-info :wayBillId ="wayBillId" :loading1="true"  v-if="tabIndex == 1"></waybill-info>
						
			
		<view class="stowageInfoBox" v-if="tabIndex == 2">
			<view class="stowageSearch">
				<view class="searchPop">
					<u-search placeholder="请输入配载单号/司机/手机号/车牌号" :showAction="false" shape="square" v-model="searchForm.key"
						@change="searchLoadOreder()"></u-search>
				</view>
				<view class="screen" :style="{'color':searchShow?'#00468C':''}" @click="onSearch">
					筛选
				</view>
			</view>
			
			<view class="content">
				<view class="stowageBox1">
					<view class="top-tips-box" :style="{'opacity':opacity,}">
						<view class="loading-box">
							<u-loading-icon></u-loading-icon>
							<text>{{pullingText}}</text>
						</view>
					</view>
					<scroll-view class="scroll-box" scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll"
						v-if="ListData.length"
						:style="{'transition-duration':`${duration}ms`,transform: `translateY(${move}rpx)`}"
						@touchstart="touchstart($event)" @touchmove="touchmove" @touchend="touchend">
						<loading-orders v-if="ListData.length" :ListData="ListData"></loading-orders>
						<view class="tip">
							<u-loadmore :line="true" :status="status" :loading-text="loadingText" :nomore-text="nomoreText"
								color="#9E9E9E" />
						</view>
					</scroll-view>
					<view class="empty" v-if="ListData.length == 0">
						<u-empty v-if="ListData.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
						<u-empty v-else mode="permission" icon="http://cdn.uviewui.com/uview/empty/permission.png"></u-empty>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="searchShow" mode="top" @close="searchClose">
			<view class="screenPop">
				<view class="sel">
					<view class="searchLi">
						<view class="selTop">
							配载单状态
						</view>
						<view class="tipsBox">
							<view class="selTips" :class="item.seled?'seled':''" v-for="(item, index) in tips"
								:key="index" @click="selTip(item,index)">
								{{ item.dicName }}
							</view>
						</view>
					</view>
					<view class="searchLi">
						<view class="selTop">
							物流状态
						</view>
						<view class="tipsBox">
							<view class="selTips" :class="item.seled?'seled':''" v-for="(item, index) in tips1"
								:key="index" @click="selTip1(item,index)">
								{{ item.dicName }}
							</view>
						</view>
					</view>
					<view>
						<u-datetime-picker :show="timeShow" v-model="time" mode="datetime" @close="timeShow = true"
							@confirm="saveTime"></u-datetime-picker>
						<u-search placeholder="输入发布时间" :disabled='true' :showAction="false" shape="square"
							v-model="timeDate" @click="timeShow = true"></u-search>
					</view>
				</view>
				<view class="btnBox">
					<view class="save btn" @click="resetSearch()">重置</view>
					<view class="up btn" @click="searchList()">筛选</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import tabbar from '@/components/tabBox/tab.vue'
	import echarts from '@/components/echarts/echarts.vue'
	import stapro from '@/components/proBox/proBox.vue'
	import waybillTab from '@/pages/waybill/waybilTab/index.vue'
	import waybillInfo from '@/pages/waybill/waybilTab/info.vue'
	import loadingOrders from '@/components/loadingOrders/loadingOrders.vue'
	import {
		wayBillDataBulletinBoard,
		carriers,
		wayBillInfo,
		getLoadingOrders,
		queryDicByDicType,
		updateWayBillMold,
		queryDicKey
	} from '@/config/api/app.js'
	export default {
		components: {
			tabbar,
			echarts,
			stapro,
			loadingOrders,
			waybillTab,
			waybillInfo
		},
		data() {
			return {
				checked: false,
				checked1: true,


				wayBillId: 0, //运单单号
				tabItem: ['数据看板', '运单信息', '配载单详情'],
				wayBillInfoDate: {}, //运单信息数据
				tabIndex: 0,
				dispatchShow: false, //选择调度: 0
				assign: 1,
				searchShow: false, //筛选弹出框
				tips: [], //运单状态
				tips1: [], //物流状态
				ListData: [], //配载单列表数据
				status: 'loadmore', //加载样式
				searchForm: {
					limit: 10,
					pages: 1,
					billStatus: [], //配载单状态
					shippingStatus: [], //物流状态
					choiceStartDate: '',
					choiceEndDate: '',
					key: '', //搜索输入关键词
				},
				timeShow: false,
				time: Number(new Date()),
				timeDate: '',
				waybillMode: null, // 是否配载过 1-指派 2-抢单
				waybillName:'', //配载模式名称
				radiolist1: [{
					name: '指派模式',
					disabled: false
				}, {
					name: '抢单模式',
					disabled: false
				},
				{
					name: '货源广场',
					disabled: false
				}],
				tipsWords: '',
				listActivity:{}, //业务类型
				unitList: [], //计量单位
				unit:'',
				listGoodsType: {},//货物类型
				//配载单滚动
				refreshFlag: true,
				gap: 100,
				touchFlag: false,
				startY: null,
				move: 0,
				opacity: 0,
				duration: 0,
				pullingText: '下拉刷新',
				loading: true,
				loadingText: '努力加载中',
				nomoreText: '没有更多了！',
				page: 1,
				isChange: false, 
				billStatus:0,
				itemId:'', //项目id
				qrCode: '',//二维码地址
			}
		},
		onLoad(option) {
			this.wayBillId = option.id
			this.billStatus = option.billStatus
			this.itemId = option.itemId
			this.getWayBillData({wayBillId: this.wayBillId})
			this.getLoadLength()
		},
		mounted() {
			console.log(111)
		},
		methods: {
			//获取配载单
			getLoadLength(data) {
				
				getLoadingOrders({
					pages: 1,
					limit: 10,
					waybillId:this.wayBillId
				}).then(res => {
					if (res.code == 0) {
						this.isChange = res.data.list.length //为空时候为false，显示切换
					}
				})
			},
			//获取数据看板信息
			getWayBillData(data) {
				console.log(111111)
				wayBillInfo(data).then(res => {
					if (res.code == 0) {
						// console.log(res.data.waybillInfo.qrCode,111111)
						// let a =  res.data.wayBillInfo
						// this.qrCode = a.qrCode
						// console.log(res.data.waybillInfo.qrCode)
						this.qrCode = res.data.waybillInfo.qrCode
					} else {
						this.$refs.uToast.show({
							message: res.message
						})
					}
				})
				wayBillDataBulletinBoard(data).then(res => {
					if (res.code == 0) {
						this.billStatus = res.data.transportationTarget.billStatus
						this.waybillMode = res.data.waybillMode
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			//货物统计信息
			goodsData(data) {
				let a = data.loadingOrderNum / this.transportationTarget.total > 1 ? 1 : data.loadingOrderNum / this
					.transportationTarget.total
				let b = data.sendNum / this.transportationTarget.total > 1 ? 1 : data.sendNum / this
					.transportationTarget.total
				let c = data.receiptNum / this.transportationTarget.total > 1 ? 1 : data.receiptNum / this
					.transportationTarget.total
				this.widthVal = 530 * a + 'rpx'
				this.widthVal1 = 530 * b + 'rpx'
				this.widthVal2 = 530 * c + 'rpx'
			},
			//配载单
			jumpDetails() {
				if (this.waybillMode == 0) {
					this.dispatchShow = true
				} else {
					let data = {
						wayBillId: this.wayBillId
					}
					this.waybillName = this.waybillMode == 1 ? '指派模式' :this.waybillMode == 2? '抢单模式':'货源广场'
					console.log(this.qrCode)
					if(this.waybillMode == 2 && this.qrCode){
						uni.navigateTo({
							url: '/pages/waybill/QRcode?wayBillId='+ this.wayBillId
						});
					}else{
						uni.redirectTo({
							url: '/pages/waybill/allocate?wayBillId=' + this.wayBillId + '&waybillName=' + this.waybillName + '&isChange=' + this.isChange
						});
					}
				}
			},
			groupChange(n) {
			},
			radioChange(n) {
			},
			//选择配载方式
			groupChange1(n) {
				this.waybillName = n
			},
			radioChange1(n) {},
			//
			selStowageStatu() {
				let a = this.waybillName == '指派模式' ? '1' :this.waybillName == '抢单模式'? '2':'3'
				this.upWayBillMold({waybillId: this.wayBillId,waybillMode:a})
				
				// uni.navigateTo({
				// 	url: '/pages/waybill/allocate?wayBillId=' + this.wayBillId + '&waybillName=' + this.waybillName + '&isChange=' + this.isChange
				// });
			},
			upWayBillMold(data){
				
				let _this = this
				// setTimeout(function(){
					
				// 	uni.redirectTo({
				// 		url: '/pages/waybill/waybill?id=' + _this.wayBillId
				// 	});
				// }, 1500)
				// return false
				 updateWayBillMold(data).then(res => {
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						setTimeout(function(){
							
							uni.redirectTo({
								url: '/pages/waybill/waybill?id=' + _this.wayBillId
							});
						}, 500)
					} else {
						this.$refs.uToast.show({
							message: res.msg
						})
					}
				 })
			},
			//关闭调度弹框
			dispatchClose() {
				this.dispatchShow = false
			},
			
			//切换tab
			tabClick(e) {
				this.tabIndex = e
				this.searchShow = false
				
				if (this.tabIndex == 1) {
					this.loading = true
				} else if (this.tabIndex == 2) {
					this.ListData = []
					this.getLoadOrders({
						pages: 1,
						limit: 10
					})
				}
			},
			//配载单列表
			getLoadOrders(data) {
				let options = {
					...data,
					waybillId: this.wayBillId
				}
				getLoadingOrders(options,
				{
					custom: {
						title: '加载中……'
					}
				}).then(res => {
					if (res.code == 0) {
						this.reset()
						this.loading = false
						this.status = 'loading'
						this.searchForm.pages == 1 ? this.ListData = res.data.list : this.ListData = [...this.ListData, ...res.data.list]
						this.page = res.data.pages
						if (this.page == this.searchForm.pages) this.status = 'nomore'
						
						// this.stowageData = [...this.stowageData, ...res.data.list]
					}
				})
			},
			saveTime() {
				this.searchForm.choiceStartDate = this.time
				this.timeDate = this.changeTimeFormat(this.searchForm.choiceStartDate)
				this.timeShow = false
			},
			//配载单搜索框
			searchLoadOreder() {
				this.getLoadOrders(this.searchForm)
			},
			//跳转到其他页面
			
			//搜索弹框
			onSearch() {
			
				this.getTips()
			},
			//重置
			resetSearch(){
				queryDicByDicType().then(res => {
					if (res.code == 0) {
						this.tips = []
						let data = res.data.LOADING_ORDER_BILL_STATUS
						for (let i = 0; i < data.length; i++) {
							
							let li = {
								...data[i],
								seled: false
							}
							// this.tips[i].seled = false
							this.tips.push(li)
						}
				
						this.tips1 = []
						let data1 = res.data.LOADING_ORDER_SHIPPING_STATUS
				
						for (let i = 0; i < data1.length; i++) {
							
							let li = {
								...data1[i],
								seled: false
							}
							this.tips1.push(li)
						}
						this.searchShow = true
					}
				})
				this.searchForm.billStatus = []
				this.searchForm.shippingStatus =[]
				this.timeDate = ''
				this.searchForm.choiceStartDate = ''
			},
			searchList(){
				this.ListData = []
				this.searchForm.pages = 1
				this.getLoadOrders(this.searchForm)
				this.searchShow = false
				return false
			},
			getTips(){
				console.log(this.searchForm)
				queryDicByDicType().then(res => {
					if (res.code == 0) {
						this.tips = []
						let data = res.data.LOADING_ORDER_BILL_STATUS
						for (let i = 0; i < data.length; i++) {
							let li = {}
							if(this.searchForm.billStatus[0] == data[i].dicValue){
								li = {
									...data[i],
									seled: true
								}
							}else{
								li = {
									...data[i],
									seled: false
								}
							}
							// let li = {
							// 	...data[i],
							// 	seled: false
							// }
							// this.tips[i].seled = false
							this.tips.push(li)
						}
				
						this.tips1 = []
						let data1 = res.data.LOADING_ORDER_SHIPPING_STATUS
				
						for (let i = 0; i < data1.length; i++) {
							let li = {}
							if(this.searchForm.shippingStatus[0] == data1[i].dicValue){
								li = {
									...data1[i],
									seled: true
								}
							}else{
								li = {
									...data1[i],
									seled: false
								}
							}
							// let li = {
							// 	...data1[i],
							// 	seled: false
							// }
							this.tips1.push(li)
						}
						this.searchShow = true
					}
				})
			},
			//选择运单状态
			selTip(data, index) {
				console.log(index)
				this.tips.forEach((item, i) => {
					if (i == index) {
						if(item.seled){
							this.searchForm.billStatus = []
							this.tips[index].seled = !this.tips[index].seled
						}else{
							this.searchForm.billStatus = [this.tips[index].dicValue]
							this.tips[index].seled = !this.tips[index].seled
						}
						
					} else {
						item.seled = false	
					}
				})
				console.log(this.searchForm)
			},
			selTip1(data, index) {
				this.tips1.forEach((item, i) => {
					if (i != index) {
						
						item.seled = false
					} else {
						if(item.seled){
							this.searchForm.shippingStatus = []
						}else{
							this.searchForm.shippingStatus = [this.tips1[index].dicValue]
						}
						
						this.tips1[index].seled = !this.tips1[index].seled
					}
				})
			},
			//关闭筛选弹框
			searchClose() {
				this.searchShow = false
			},
			//返回上一个页面
			back() {
				// console.log(111111111111111)
				 // uni.navigateBack()
				 uni.redirectTo({
				 	url: '/pages/home/home'
				 });
			},
			
			changeTimeFormat: function(time) {
				var date = new Date(time);
				var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				var hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				return date.getFullYear() + "-" + month + "-" + currentDate + " " + hh + ":" + mm;
				//返回格式：yyyy-MM-dd hh:mm
			},
			reset() {
				this.touchFlag = false;
				this.startY = null;
				this.move = 0;
				this.opacity = 0;
				this.pullingText = '下拉刷新'
			},
			scroll(e) {
				e.target.scrollTop <= 0 ? this.refreshFlag = true : this.refreshFlag = false
			},
			scrolltolower() {
				this.searchForm.pages += 1
				if (this.searchForm.pages > this.page) {
					this.status = 'nomore'
					return
				}
				uni.$u.throttle(this.getLoadOrders(this.searchForm), 3000)
			},
			touchend() {
				this.duration = 300;
				if (this.pullingText === '下拉刷新') {
					this.reset();
				} else if (this.pullingText === '释放刷新') {
					this.touchFlag = false;
					if (this.move > 0) {
						// this.move = 100;
						this.pullingText = '努力加载中...';
						
						setTimeout(() => {
							this.searchForm.pages = 1
							this.getLoadOrders(this.searchForm)
						}, 600)
					}
				}
			},
			touchstart(e) {
				if (!this.refreshFlag) return
				if (this.pullingText === '下拉刷新') {
					this.duration = 0;
					this.touchFlag = true;
					this.startY = e.touches[0].clientY;
				}
			},
			touchmove(e) {
				let endY = e.touches[0].clientY
				let top = endY - this.startY
				if (this.touchFlag && top > 0) {
					if (top < this.gap) {
						this.pullingText = '下拉刷新';
						if (top <= 0) top = 0
					} else if (top > this.gap + 10) {
						top = this.gap
						this.pullingText = '释放刷新'
					}
					this.move = top;
					let opacity = (top * 0.015).toFixed(2) > 1 ? 1 : (top * 0.015).toFixed(2);
					this.opacity = opacity;
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	* {
		box-sizing: border-box;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #fafafa;
		padding-bottom: 200rpx;
		padding: 240rpx 0 0;
		box-sizing: border-box;

		.fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10079;
		}

		.header-wrap {



			width: 100vw;
			box-sizing: border-box;
			padding: 100rpx 24rpx 16rpx;
			background: #fff;

			.nav-wrap {
				position: relative;
				// align-items: center;
				justify-content: space-between;
				text-align: center;
				.left{
					position: absolute;
					left: 0;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.patternState{
					position: absolute;
					right: 0;
					top: 0;
				}
				text {
					position: absolute;
					right: 0;
					min-width: 30rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}

		.dispatchBox {
			width: 664rpx;
			// height: 744rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			position: relative;

			.close {
				width: 28rpx;
				height: 28rpx;
				position: absolute;
				top: 28rpx;
				right: 28rpx;
			}

			.tabUl {

				.tabLi {
					height: 240rpx;
					line-height: 240rpx;
					font-size: 44rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					width: 576rpx;
					border-bottom: 2rpx solid #F5F7FB;
					background: url('@/static/waybIll/qiangd.png') no-repeat;
					background-size: 60rpx 58rpx;
					background-position: 0 center;
					padding-left: 76rpx;

					.u-checkbox-group--row {
						width: 44rpx;
						height: 44rpx;
						margin-top: 98rpx;
					}
				}

				.tabLi:last-child {
					background: url('@/static/waybIll/zhipai.png') no-repeat;
					background-size: 60rpx 58rpx;
					background-position: 0 center;
				}

			}

			.selDispatch {
				width: 576rpx;
				height: 98rpx;
				text-align: center;
				line-height: 98rpx;
				background: #003E81;
				color: #FFFFFF;
				margin: 0 auto 44rpx;
			}

			.noSel {
				background: #fafafa;
				color: #003E81;
			}

			.dispatchHead {
				font-size: 32rpx;
				text-align: center;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				margin: 44rpx 0 36rpx;
				color: #333333;
			}
		}

		.tabBox {
			background: #FFFFFF;
			z-index: 10087;
		}
		.changeHead {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			text-align: center;
			padding: 28rpx 0 14rpx;
		}

		.searchBox {
			padding: 0 28rpx;
			// .tabUl{

			// }
		}

		.tabUl {
			height: 300rpx;
			overflow-y: auto;

			.tabLi {
				width: 692rpx;
				margin: 0 auto;
				border-bottom: 2rpx solid #F5F7FB;
				height: 98rpx;
				line-height: 98rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;

				.u-checkbox-group--row {
					float: right;
					margin-top: 24rpx;
				}
			}

			.tabLi:last-child {
				border-bottom: none
			}

		}

		.changeBtn {
			display: flex;
			padding: 8rpx 28rpx 68rpx 28rpx;
			font-size: 28rpx;

			.cancle {
				width: 264rpx;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				border: 2rpx dashed #E8E8E8;
				border-radius: 4rpx;
			}

			.true {
				width: 398rpx;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				border-radius: 4rpx;
				background: #00468C;
				margin-left: 28rpx;
				color: #FFFFFF;
			}
		}

		.wayinfoBox {
			background: #FFFFFF;
			margin-top: 14rpx;

			.tabCon {
				background: #FFFFFF;
				border-bottom: 14rpx solid #FAFAFA;

				.wayUl {
					padding: 0 28rpx;
					.tabLi {
						height: 68rpx;
						line-height: 68rpx;
						
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #888888;

						span {
							float: right;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 600;
							color: #333333;
						}
					}

					.tabLi.tabLi:nth-child(2n-1) {
						background: #FBFBFB;
					}
				}
			}

			h5 {
				height: 36rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 36rpx;
				border-left: 8rpx solid #003E81;
				padding-left: 14rpx;
				margin: 28rpx 0 20rpx;
			}
		}

		.stowageInfoBox {
			box-sizing: border-box;
			.stowageSearch {
				padding: 14rpx 24rpx;
				display: flex;

				.searchPop {
					flex: 1;
					height: 72rpx;
					background: rgba(118, 118, 128, 0.04);
					border-radius: 8rpx;
				}

				.screen {
					margin-left: 24rpx;
					height: 72rpx;
					line-height: 72rpx;
					font-size: 14px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					background: url('@/static/waybIll/screen.png') no-repeat;
					background-size: 32rpx 32rpx;
					background-position: right center;
					padding-right: 40rpx;
					z-index: 10078;
				}
			}

			.stowageList {
				width: 100%;
				background: #FFFFFF;
				border-radius: 7rpx;
				overflow: auto;
				margin-bottom: 28rpx;
				padding-bottom: 28rpx;

				.stowageHead {
					height: 94rpx;
					line-height: 94rpx;
					display: flex;
					padding: 27rpx 0 0 29rpx;
					background: linear-gradient(90deg, #E9EEF6 0%, rgba(255, 255, 255, 0.95) 100%);

					.stowageLeft {
						height: 40rpx;
						background: #586486;
						border-radius: 4rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
					}

					.stowageContent {
						margin: 0 36rpx 0 14rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 40rpx;
					}

					.tag {
						width: 74rpx;
						height: 32rpx;
						background: #E8E8E8;
						border-radius: 4rpx;
						line-height: 32rpx;
						text-align: center;
						color: #888888;
						font-size: 24rpx;
					}
				}

				.address {
					padding: 18rpx 0 0 28rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
				}

				.stowageInfo {
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9E9E9E;
					line-height: 33rpx;
					padding-left: 33rpx;

					.company {
						margin-bottom: 26rpx;
						font-size: 24rpx;
					}

					.goods {
						font-size: 26rpx;
						display: flex;

						.goodsName {
							margin-right: 40rpx;
						}

						.goodsName text {
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #00468C;
						}

						.carNum {
							// width: 132rpx;
							background: #FFFFFF;
							display: flex;
							line-height: 34rpx;

							// border: 2rpx solid #003E81;
							view {
								width: 40rpx;
								height: 38rpx;
								background: #003E81;
								border-radius: 4rpx 0 0 4rpx;
								text-align: center;
								margin-right: 0;
								color: #FFFFFF;
							}

							text {
								font-size: 20rpx;
								zoom: 0.9;
							}

							.carNumber {
								border: 2rpx solid #003E81;
								padding: 0 18rpx;

							}
						}
					}

					.phoneInfo {
						font-size: 26rpx;
						display: flex;
						margin-top: 16rpx;

						text {
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.called {
							width: 98rpx;
							text-align: center;
							height: 40rpx;
							background: #F0F7FF;
							border-radius: 4rpx;
							color: #003E81;
							display: inline-block;
							margin-left: 28rpx;

							text {
								zoom: 0.9
							}
						}
					}

					.timeInfo {
						font-size: 26rpx;
						display: flex;
						margin-top: 16rpx;

						.text {
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}

					.name {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #9E9E9E;
						margin: 16rpx 0 26rpx 0;
					}

					.goodsInfo {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #9E9E9E;
						display: flex;

						text {
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #8C0000;
						}

						.goodsName {
							padding-right: 44rpx;

							text {
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #00468C;
							}
						}
					}

					.progress {
						font-size: 22rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						display: flex;
						padding-top: 18rpx;
						line-height: 24rpx;

						.progressBar {
							width: 350rpx;
							height: 28rpx;
							margin-right: 28rpx;
						}
					}
				}
			}

		}

		.screenPop {
			width: 100%;
			margin-top: 220rpx;
			background: #FFFFFF;
			padding: 44rpx 28rpx;
			box-shadow: 20rpx 14rpx 24rpx 24rpx rgba(0, 0, 0, 13%);

			.sel {
				.searchLi {
					margin-bottom: 44rpx;
				}

				.selTop {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-top: 14rpx;
					margin-bottom: 14rpx;
				}

				.tipsBox {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex-wrap: wrap;
					margin: 0 -13px;

					.selTips {
						width: 210rpx;
						height: 84rpx;
						text-align: center;
						line-height: 84rpx;
						background: #FAFAFA;
						border-radius: 4rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						margin: 0 0 28rpx 28rpx;
					}

					.seled {
						background: #F0F7FF !important;
					}
				}
			}
		}
		.content {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: calc(100vh - 360rpx);
			background-color: #fafafa;
			.stowageBox1{
				height: 100%;
				box-sizing: border-box;
			}
			.scroll-box {
				position: relative;
				height: 100%;
				background: #fafafa;
				padding: 0 24rpx;
				box-sizing: border-box;
				.tip {
					margin-top: 32rpx;
					padding-bottom: 24rpx;
				}
			}
		
			.top-tips-box {
				position: absolute;
				left: 0;
				right: 0;
				// transform: translateY(-100%);
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100rpx;
				text-align: center;
				opacity: 0;
				overflow: hidden;
				font-size: 28rpx;
				// z-index: -1;
				color: #9e9e9e;
		
				.loading-box {
					height: 100%;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
		
					text {
						margin-left: 10rpx;
					}
				}
			}
		
			.empty {
				margin-top: 100rpx;
			}
		}
		.gray{
			padding: 0 4rpx;
			background: #fafafa;;
			border-radius: 4rpx;
			color: #FFFFFF!important;
		}
		.green{
			padding: 0 4rpx;
			background:#48dcb5;
			border-radius: 4rpx;
			color: #FFFFFF!important;
		}
		.btnBox {
			width: 100%;
			background: #FFFFFF;
			margin-top: 30rpx;
			.btn {
				color: #FFFFFF;
				border-radius: 4px;
				height: 80rpx;
				background: linear-gradient(to right, #4d83b9, #003E81);
				text-align: center;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
			}
			.save{
				float: left;
				width: 40%;
				background: #FAFAFA;
				color: #003E81;
			}
			.up{
				float: right;
				width: 50%;
			}
			
		}
	}
</style>
